<script lang="ts" setup>
import { useRoute,useRouter } from "vue-router";
import { ref } from "vue"; // 添加这一行
import { computed } from "vue";
import { ElButton, ElTable, ElTableColumn } from 'element-plus'
const route=useRoute()
const router=useRouter()
function ff(){
    router.push("/order")//replace
    // router.push({
    //     name:"order",
    //     params:{
    //         title:route.params.title,
    //         id:route.params.id,
    //         des:route.params.des
    //     }
    // })
}

const handleClick = () => {
  console.log('click')
}

const tableData = computed(()=>[
    {
    id: route.params.title,
    title: route.params.id,
    des: route.params.des
    },{
    id: route.params.title,
    title: route.params.id,
    des: route.params.des
    },{
    id: route.params.title,
    title: route.params.id,
    des: route.params.des
    }
])


</script>

<template>
    <div class="details">
        <!-- <h3>产品标题:{{ route.query.title }}</h3>
        <h3>产品编号:{{ route.query.id }}</h3>
        <h3>产品信息:{{ route.query.des }}</h3> -->

        <!-- <h3>产品标题:{{ route.params.title }}</h3>
        <h3>产品编号:{{ route.params.id }}</h3>
        <h3>产品信息:{{ route.params.des }}</h3> -->
        
        <el-table :data="tableData" style="width: 100%">
                        <el-table-column fixed prop="id" label="产品标题" width="150" />
                        <el-table-column prop="title" label="产品编号" width="120" />
                        <el-table-column prop="des" label="产品信息" width="120" />
                        <el-table-column fixed="right" label="Operations" min-width="120">
                          <template #default>
                            <el-button link type="primary" size="small" @click="handleClick">
                              Detail
                            </el-button>
                            <el-button link type="primary" size="small">Edit</el-button>
                          </template>
                        </el-table-column>
        </el-table>
        <el-button type="primary" @click="ff">去订单页面</el-button>
    </div>
</template>

<style scoped>
.details{
    background-color: skyblue;
    padding: 20px;
}
h3{
    margin: 0px;
}
</style>